<%@page pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>数据融合平台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8 "/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/font.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/xadmin.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/echarts.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    .first{
        width: 100%;
        height: 400px;
        background: #E0E0E0;
        border-radius: 20px 20px 0 0 ;
        margin-bottom: 20px;
        color: #E0E0E0;
    }
    .firstbt{
        width: 100%;
        height: 50px;
        background: #28495a;
        border-radius: 20px 20px 0 0 ;
        padding-top: 10px;
    }
    .firstbtright{
        width:40%;
        height: 40px;
        margin-left: 30%;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        float: left;   
        font-weight: bold;    
    }
    .xz{
        width: 100%;
        height: 760px;
        background: #E0E0E0;
         border-radius: 20px 20px 0 0 ;
    }
    .xz .bt{
        width: 100%;
        height: 50px;
        background: #ee5a14;
        border-radius: 20px 20px 0 0 ;
        padding-top: 10px;
        float: left;
    }
    .btleft{
        width:50%;
        height: 40px;
        /* margin-left: 30%; */
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        float: left;
    }
    .bigxb{
    	width:150px;
    }
    .btright{
        width:50%;
        height: 40px;
        margin-left: 0%;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        float: left;
    }
    .bt select{
        margin-top: -10px;
        height: 30px;
    }
    .first select{
        margin-top: -8px;
        height: 30px;
        font-weight: normal;
    }
    .two{
      width: 100%;
      float: left;
    }
    .three{
       width: 100%;
       float: left;
       margin-bottom: 50px;
    }
    .clubsweek{
        margin-top:60px;width: 40%;height:400px; background: red; float: left;
    }
    </style>
  </head>
  
  <body class="layui-anim layui-anim-up">
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">晨跑健步</a>
        <a>
          <cite>晨跑健步数据</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <div class="first">
        <div class="firstbt">
             <div class="firstbtright">
              各系今日晨跑，健步人次
            </div>
        </div>
        <div id="cpjbdaynum" style="width: 100%;height:300px;margin-bottom:10px;"></div>          
      </div>
      <div class="xz">
          <div class="bt">
              <div class="btleft">
              系别
                <div class="layui-input-inline bigxb">
                  <select name="province" lay-filter="province"  id="depart">
                      <c:forEach items="${dwhList}" var="dwh">
                        <option style="width:120px;" value="${dwh.dwh}">${dwh.dwmc}</option>
                      </c:forEach>
                  </select>
                </div>
              </div>
              <div class="btright">
              学年
                <div class="layui-input-inline">
                  <select name="province" lay-filter="province"  id="yearTermId">
                      <c:forEach items="${yearList}" var="year">
                        <option value="${year}">${year}</option>
                      </c:forEach>
                  </select>
                </div>
              </div>
          </div>
          <div class="two">
            <div id="cpjbweek" style="margin-top:20px;width: 100%;height:280px; float: left;"></div>  
          </div>
          <div class="three">
            <div id="cpjbmonth" style="margin-top:60px;width: 60%;height:280px; float: left;"></div>
            <div id="cpjterm" style="margin-top:60px;width: 40%;height:280px; float: left;"></div>
          </div>
      </div>

    </div>
    <script>
        $(document).ready(function(e) {
        	

            function cpjbweekData(year,dwh){
            	var cpjbweek = echarts.init(document.getElementById('cpjbweek'));
                cpjbweek.setOption({
                    title : {
                        text: '各系周活动人数',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
                    grid:{
                        x:40,
                        y:40,
                        x2:70,
                        borderWidth:1
                    },
                    legend: {
                        x:70,
                        y:5,
                    },
                    dataZoom: [
                        {
                            show: true,
                            realtime: true,
                            start: 0,
                            end: 100,
                        },
                        {
                            type: 'inside',
                            realtime: true,
                            start: 30,
                            end: 70,
                        }
                    ],
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            data : [],
                            name:'月份',
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            name:'人数',
                        }
                    ],
                    series : [
                    ]
                });
            	$.ajax({ 
                    type: "get", 
                    data :{"year":year,"dwh":dwh},
                    dataType: "json", 
                    url:"<%=request.getContextPath()%>/hpams/getHpamsActiveCount",
                    success: function(json) {
                    	var arr=json;
                        var cpjbweekseries=[];
                        var cpjbweekdataval=new Array();
                        var cpjbweekdataname=new Array();
                        for(var i = 0;i<arr.length;i++){
                        	cpjbweekdataval[i]=new Array();
                           for(j=0;j<arr[i].items.length;j++){
                        	   cpjbweekdataval[i][j]=arr[i].items[j].value;
                        	   cpjbweekdataname[j]=arr[i].items[j].name;
                            }
                            /* console.log(clubsnumdataname); */
                            cpjbweekseries.push({
                                name: arr[i].name,
                                type: 'bar',
            					markPoint : {
            					    data : [
            					        {type : 'max', name: '最大值'},
            					        {type : 'min', name: '最小值'}
            					    ]
            					},
            					markLine : {
            					    data : [
            					        {type : 'average', name: '平均值'}
            					    ]
            					},
                                data: cpjbweekdataval[i]
                            });
                        }
                    	cpjbweek.setOption({
                    	 xAxis : [
                    	     {
                    	         data : cpjbweekdataname
                    	     }
                    	 ],
                    	 series :cpjbweekseries
                    	});
                    },
                    error:function(json){
        	            layer.alert('数据访问出错',{
        	                icon:5});
                    }
                });  	            	
            }
            cpjbweekData(); 
	function month(year,dwh){
        var cpjbmonth = echarts.init(document.getElementById('cpjbmonth'));
        var cpMonthArr = [];
        var cpValueArr = [];
        if(year==null||year==''){
     	   year="2018";
        }
        if(dwh==null||dwh==''){
     	   dwh="206";
        }
        $.ajax({
            url:'<%=request.getContextPath()%>/hpams/getMonthRunActiveCountByYearDwh',
            data:{'year' : year, 'dwh' : dwh},
            dataType:'json',
            type:'get',
            async:false,
            success:function(result){
                for(var i = 0; i < result.length; i++){
                    for(var j = 0; j < result[i].items.length; j++){
                        cpMonthArr.push(result[i].items[j].month);
                        cpValueArr.push(result[i].items[j].value);
                    }
                }
            },
            error:function(result){
	            layer.alert('数据访问出错',{
	                icon:5});
            }
        });
        cpjbmonth.setOption({
                title : {
                    text: '各系晨跑健步月活动人次',
                    x:70
                },
                tooltip : {
                    trigger: 'axis'
                },
                color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
                grid:{
                    x:40,
                    y:40,
                    x2:70,
                    borderWidth:1
                },
                legend: {
                    x:"center",
                },
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100,
                    },
                    {
                        type: 'inside',
                        realtime: true,
                        start: 30,
                        end: 70,
                    }
                ],
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : cpMonthArr,
                        name:'月份',
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        name:'人数',
                    }
                ],
                series : [
                    {
                        name:'晨跑',
                        type:'bar',
                        data:cpValueArr,
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            }
        );		
	}
	month();

            var cpjbdaynum = echarts.init(document.getElementById('cpjbdaynum'));

            var series = new Array();
            var dataname = new Array();
            var datavalue = new Array();

            $.ajax({
                url:"<%=request.getContextPath()%>/hpams/getYxStuNumByDay",
                data:{
                    "day":"2017-09-26"
                },
                async : false,
                type:'get',
                dataType:"json",
                success:function (result) {
                    for (var i = 0; i< result.items.length; i++){
                        dataname.push(result.items[i].name);
                        datavalue.push(result.items[i].value);
                    }
                    series.push({
                        // name:[],
                        type:'bar',
                        data:datavalue,
                    })
                } ,
                error:function () {
		            layer.alert('数据访问出错',{
		                icon:5});
                }
            });
            cpjbdaynum.setOption({
                /*            title : {
                                text: '各俱乐部会员人数分布',
                                textStyle:{
                                  color:'#666',
                                },
                                x:'center',
                            },*/
                grid:{
                    x:40,
                    y:40,
                    x2:70,
                    borderWidth:1
                },
                color:[ '#9bcd38','#fbc80b','#ee5a14','#353537'],
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    x:70,
                    y:5,
                },
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100,
                    },
                    {
                        type: 'inside',
                        realtime: true,
                        start: 30,
                        end: 70,
                    }
                ],
                toolbox: {
                    show : true,
                    orient:'vertical',
                    feature : {
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    },
                    x:'right'
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        name:'俱乐部',
                        nameTextStyle:{
                            color:' #28495a',

                        },
                        data :[]
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        name:'人数',
                    }
                ],
                series : [
                ]
            });

            cpjbdaynum.setOption({
                xAxis : [
                    {
                        type : 'category',
                        data : dataname
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'晨跑',
                        type:'bar',
                        data:datavalue,
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            });


            //
            function term(year,dwh){
                var series=[];
                var prevTermArray = [];
                var nextTermArray = [];
               var prevDataObj = {
                   name :"",
                   type:"bar",
                   data: []
               };
               var nextDataObj = {
                   name :"",
                   type:"bar",
                   data: [],
               }
                var dataName=new Array();
               if(year==null||year==''){
            	   year="2017-2018";
               }
               if(dwh==null||dwh==''){
            	   dwh="206";
               }
                $.ajax({
                    url:"<%=request.getContextPath()%>/hpams/getXYStuNumByYear",
                    data:{
                        "year":year,
                        "dwh":dwh,
                    },
                    async : false,
                    type:'get',
                    dataType:"json",
                    success:function (result) {
                        for(var i = 0; i < result.length; i++){
                            dataName.push(result[i].name);
                            for(var j = 0; j < result[i].items.length; j++){
                                if(result[i].items[j].term == '上学期'){
                                    prevTermArray.push(result[i].items[j].term);
                                    prevDataObj.name  = prevTermArray;
                                    prevDataObj.data.push(result[i].items[j].value);
                                }else{
                                    nextTermArray.push(result[i].items[j].term);
                                    nextDataObj.name  = nextTermArray;
                                    nextDataObj.data.push(result[i].items[j].value);
                                }

                            }
                        }
                        series.push(prevDataObj);
                        series.push(nextDataObj);
                    },
                    error:function () {
    		            layer.alert('数据访问出错',{
    		                icon:5});
                    }
                });
                var cpjterm = echarts.init(document.getElementById('cpjterm'));
                cpjterm.setOption({
                        title : {
                            text: '各系晨跑健步学期活动人次',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
                        grid:{
                            x:40,
                            y:40,
                            x2:70,
                            borderWidth:1
                        },
                        legend: {
                            x:'right',
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                data : dataName,
                                name:'项目',
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                name:'人数',
                            }
                        ],
                        series : series
                    }
                );            	
            }
			term();
			
			
		    $("#yearTermId").change(function(){//change事件加载直接获取clubs数据
		    	yearTermId=$("#yearTermId").val();
		    	depart=$("#depart").val();
		    	month(yearTermId.substr(0, 4),depart);
		    	term(yearTermId,depart);
		    	cpjbweekData(yearTermId.substr(0, 4),depart);
			}); 
		    $("#depart").change(function(){//change事件加载直接获取clubs数据
		    	yearTermId=$("#yearTermId").val();
		    	depart=$("#depart").val();
		    	month(yearTermId.substr(0, 4),depart);
		    	term(yearTermId,depart);
		    	cpjbweekData(yearTermId.substr(0, 4),depart);
			}); 
        })

    </script>
  </body>

</html>